<!--/* Visual configuration */-->
<template>
  <div class="app-container">
    <!--  steps-group  -->
    <div class="steps-box">
      <el-row>
        <el-steps :active="visualActive" align-center>
          <el-step title="组件选择"></el-step>
          <el-step title="自定义设置"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </el-row>
    </div>
    <!--  visual action config  -->
    <el-row>
      <el-col :span="8" :xs="24">
        <!--    module config    -->
        <transition name="slide-fade" v-if="visualActive == 1 ">
          <!--   action config   -->
          <div class="config-group">
            <h2 class="config-item-title">
              组件选择
            </h2>
            <el-alert
              title="Tips: 选择拖拽组件到右侧配置区即可进行组件自定义设置、排序等操作~"
              type="info"
              style="margin-bottom: 20px;"
              show-icon/>
            <!--列表1-->
            <draggable
              class="action-config-group"
              element="div"
              v-model="actionVisualData"
              :options="actionDragOptionsStar"
              :move="onMove"
              @start="isDragging=true"
              @end="actionMoveEnd"
              draggable=".move-drag"
            >
              <!--isDragging=false-->

              <div v-for="(item,key) in actionVisualData"
                   class="item-card"
                   :class="[item.move_drag ? 'move-drag':'no-drag']"
                   :key="key"
              >
<!--                <img :src="iconSrc"/>-->
                <p>{{item.name}}</p>
              </div>
            </draggable>
          </div>
        </transition>
      </el-col>
      <el-col :span="8" :xs="24">
        <div class="visual-config-content">
          <h2 class="config-item-title">
            {{query.tab_name}}配置
          </h2>
          <!--列表2-->
          <div class="visual-web-group">
            <el-scrollbar style="height: 100%" ref="scrollWarp">
              <img src="../../../assets/draggable-img/WeUI-navbar.png" alt="" class="weui-navbar">
              <div class="visual-box-one"></div>
              <div class="visual-box-two">
                <div class="type-tab-group">
                  <div v-for="(item,key) in visualDataCenter.tabs"
                       class="tab-item"
                       :class="['tab-item-'+ visualDataCenter.tabs.length, tabsShowActive == key ? 'active':'']"
                       :key="key"
                       :data-index="key"
                  >
                    <div class="tabText">
                      <span>{{item}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="visual-box-three">
                <div class="default-tips" v-if="visualDataCenter.action.length == '0'">选择组件拖拽到此处</div>
                <draggable
                  class="tabs-content"
                  element="div"
                  :list="visualDataCenter.action"
                  :options="actionDragOptionsEnd"
                  :move="onMove"
                  @start="isDragging=true"
                  @end="isDragging=false"
                >
                    <template v-if="visualActive === 1">
                      <div v-for="(item,index) in visualDataCenter.action"
                           class="tabs-item"
                           :data-index="index"
                           :key="index">
                        <div class="name">
                          {{item.name}}
                          <div class="tips-text" v-if="item.is_punch === 1 && item.is_give_score === 1">
                            打卡奖励{{item.score}}健康值
                          </div>
                        </div>
                        <p class="time"><span v-if="item.time_limit === 1">打卡时间：{{item.start}}-{{item.end}}</span><span v-if="item.description !== ''">{{item.description}}</span></p>
                        <div class="dk-btn" v-if="item.is_punch === 1">
                          <div class="play-card">
                            <span class="play-card-in">打卡</span>
                          </div>
                        </div>
                        <i class="el-icon-delete del-btn" @click="delAction(item,index)"></i>
                      </div>
                    </template>
                    <template v-else-if="visualActive === 2">
                      <div v-for="(item,index) in visualDataCenter.action"
                           class="tabs-item"
                           :data-index="index"
                           :key="index"
                           :class="{'click-action':index === clickActionShow}"
                           @click="clickAction(index,$event)">
                        <div class="name">
                          {{item.name}}
                          <div class="tips-text" v-if="item.is_punch === 1 && item.is_give_score === 1">
                            打卡奖励{{item.score}}健康值
                          </div>
                        </div>
                        <p class="time"><span v-if="item.time_limit === 1">打卡时间：{{item.start}}-{{item.end}}</span><span v-if="item.description !== ''">{{item.description}}</span></p>
                        <div class="dk-btn" v-if="item.is_punch === 1">
                          <div class="play-card">
                            <span class="play-card-in">打卡</span>
                          </div>
                        </div>
                        <i class="el-icon-delete del-btn" @click="delAction(item.name,key)"></i>
                      </div>
                    </template>
                    <template v-else>
                      <div v-for="(item,index) in visualDataCenter.action"
                           class="tabs-item"
                           :data-index="index"
                           :key="index">
                        <div class="name">
                          {{item.name}}
                          <div class="tips-text" v-if="item.is_punch === 1 && item.is_give_score === 1">
                            打卡奖励{{item.score}}健康值
                          </div>
                        </div>
                        <p class="time"><span v-if="item.time_limit === 1">打卡时间：{{item.start}}-{{item.end}}</span><span v-if="item.description !== ''">{{item.description}}</span></p>
                        <div class="dk-btn" v-if="item.is_punch === 1">
                          <div class="play-card">
                            <span class="play-card-in">打卡</span>
                          </div>
                        </div>
                      </div>
                    </template>
                </draggable>
              </div>
              <div class="visual-box-four">
                <div class="tabbar-item on">
                  <img src="../../../assets/draggable-img/icon_tabbar.png" alt="" class="tabbar__icon">
                  <p class="tabbar__label">今天</p>
                </div>
                <div class="tabbar-item">
                  <img src="../../../assets/draggable-img/icon_tabbar.png" alt="" class="tabbar__icon">
                  <p class="tabbar__label">个人中心</p>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <!--  -->
        </div>
      </el-col>
      <el-col :span="8" :xs="24">
        <div class="config-group" v-if="visualActive == 2">
          <h2 class="config-item-title">
            自定义设置
          </h2>
          <el-alert
            title="左侧点击选中组件可以自由设置该组件哦~"
            type="info"
            style="margin-bottom: 20px;"
            show-icon/>
          <visual-form
            ref="visualForm"
            :roles="roles"
            :sup_this="sup_this"
            :is-add="false"
            :formData="formData">
          </visual-form>
        </div>
      </el-col>
    </el-row>
    <!--  function button group  -->
    <el-row>
      <el-col :offset="18" :span="6">
        <div class="function-button-group" style="position: fixed; bottom: 30px; right: 20px;">
          <el-button plain @click="clickBackHandle('up')" v-if="visualActive !== 1">上一步</el-button>
          <el-button type="primary" plain @click="clickBackHandle('down')" v-if="visualActive !== 3">下一步</el-button>
          <el-button type="danger" @click="submitVisualConfig" v-if="visualActive == 3">保存</el-button>
        </div>
      </el-col>
    </el-row>
    <!--    -->
  </div>
  <!--  -->
</template>

<script>
  import draggable from "vuedraggable";
  import visualForm from "./module/visualFrom";

  export default {
    name: "visual-draggable-config",
    components: {
      draggable,
      visualForm,
    },
    data() {
      return {
        query: {
          id: '',
          sort: '',
          tab_name: '',//当前的tab
          tab_names: [],//全部的tab
          action_config: {},
        },
        formData: {},
        sup_this: this,
        roles: [],
        tabsShowActive: 0,
        actionFromShow: false,
        visualActive: 1,
        isDragging: false,
        iconSrc: "../../../src/assets/draggable-img/dragicon-zuoxi.png",
        //tabs可视化配置数据
        moduleVisualData: [],
        //行为可视化配置数据
        actionVisualData: [],
        //配置中心
        visualDataCenter: {
          tabs: [],
          action: [],
        },
        clickActionShow: '',
        dragActionArr:[]
      };
    },
    computed: {
      actionDragOptionsStar() {
        return {
          animation: 300,
          group: {
            name: "actionDragOptions",
            pull: "clone",
            put: false,
          },
          ghostClass: "ghost",
          sort: false,
        };
      },
      actionDragOptionsEnd() {
        return {
          animation: 300,
          group: "actionDragOptions",
        };
      },
    },
    created() {
      this.query.id = this.$route.query.id
      this.query.sort = this.$route.query.sort
      this.query.tab_name = this.$route.query.tab_name
      this.dragActionArr = this.$route.query.action_arr
      this.visualDataCenter.action = this.query.action_config = this.$route.query.action_config || [];
      this.visualDataCenter.tabs = this.query.tab_names = this.$route.query.tab_names

      if (sessionStorage.getItem('reload') == '1') {
        this.$router.go(-1)
      }
      this.$nextTick(() => {
        this._getActionConfig();
        if (this.visualDataCenter.tabs.length > 0) {
          this.visualDataCenter.tabs.forEach((item, index) => {
            if (item == this.query.tab_name) {
              this.tabsShowActive = index
            }
          })
        }
      })
    },
    mounted() {
      this.createBeforeunloadHandler()
    },
    methods: {
      delAction(item, i) {
        this.$confirm(`是否移除${item.name}组件?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.visualDataCenter.action.splice(i, 1);
          this.actionVisualData.forEach((a,index)=>{
            if(a.item === item.item){
              this.$set(this.actionVisualData[index],'move_drag',true)
            }
          })
          this.$message({
            type: 'success',
            message: '删除移除!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移除',
          });
        });
      },
      clickTabsHandle(e) {
        let data = e.currentTarget.dataset;
        this.tabsShowActive = data.index;
      },
      actionMoveEnd(env) {
        this.isDragging = false;
        console.log(this.actionVisualData[env.oldIndex])
        this.$set(this.actionVisualData[env.oldIndex],'move_drag',false)
        console.log(this.actionVisualData[env.oldIndex])
      },
      submitVisualConfig() {
        this.$confirm('正在提交当前配置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          let _that = this;
          let actionConfig = this.visualDataCenter.action.forEach((item, index) => {
            delete this.visualDataCenter.action[index].id
            delete this.visualDataCenter.action[index].add_at
            delete this.visualDataCenter.action[index].update_at
          })
          console.log(actionConfig)
          let param = {
            id: this.query.id,
            action_config: JSON.stringify(this.visualDataCenter.action),
            sort: this.query.sort,
          }
          this.$api.permission.visualDraggableConfig.saveAction({ data: param }).then(result => {
            console.log(result)
            this.$router.go(-1);
            this.$message({
              type: 'success',
              message: '提交成功!',
            });
          }).catch(error => {
            this.$message({
              type: 'error',
              message: '提交异常!',
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      },
      _getActionConfig() {
        this.$api.permission.visualDraggableConfig
          .getActionConfig()
          .then(result => {
            let data = result.data;
            this.actionVisualData = data;

            this.actionVisualData.forEach((item,index)=>{
                this.$set(this.actionVisualData[index],'move_drag',true)
              this.dragActionArr.forEach((a)=>{
                if(item.item === a ){
                  this.$set(this.actionVisualData[index],'move_drag',false)
                }
              })
            })
          })
          .catch(err => {
            console.log(err)
          })
      },
      onMove(env) {
        const relatedElement = env.relatedContext.element;
        const draggedElement = env.draggedContext.element;
        return (
          (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
        );
      },
      clickBackHandle(type) {
        let active = this.visualActive;
        switch (type) {
          case "up":
            if (active > 1) {
              this.visualActive--
            }
            break;
          case "down":
            if (active < 4) {
              this.visualActive++
            }
        }
      },
      clickAction(index, e) {
        let i = e.currentTarget.dataset.index,
          data = this.visualDataCenter.action[i];
        console.log(data)
        this.formData = data;
        console.log(this.formData)
        this.actionFromShow = false
        this.actionFromShow = true
        this.clickActionShow = index
      },
      createBeforeunloadHandler() {
        window.addEventListener('beforeunload', this.beforeunloadHandler, false);
      },
      destroyedBeforeunloadHandler() {
      window.removeEventListener('beforeunload', this.beforeunloadHandler, false);
      },
      beforeunloadHandler(e) {
        e = e || window.event;
        if(e){
          e.returnValue = "确定要关闭窗口吗?"
        }
        sessionStorage.setItem('reload','1');
        return "确定要关闭窗口吗?"
      },
    },
    destroyed() {
      this.destroyedBeforeunloadHandler();
      sessionStorage.setItem('reload', '0')
    },
  };
</script>

<style lang="scss" rel="stylesheet/scss">
  .el-col {
    min-height: 1px;
  }

  .steps-box {
    margin: 10px 0 36px;
  }

  .config-item-title {
    position: relative;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    padding-left: 14px;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 22px;
      border-radius: 2px;
      background: #409EFF;
    }
  }

  .config-group {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column nowrap;

    .action-config-group, .module-config-group {
      width: 360px;
      background: #ffffff;
      min-height: 480px;
      text-align: center;
      display: flex;
      align-content: flex-start;
      flex-flow: wrap;
      box-sizing: border-box;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #f1f1f1;

      > .item-card {
        width: 120px;
        height: 120px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column nowrap;
        transition: .3s;
        margin: -1px -1px 0 0;
        border: 1px solid #f1f1f1;
        &.move-drag{
          cursor: all-scroll;
          &:hover {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          }
        }
        &.no-drag{
          cursor: no-drop;
          background-color: #f1f1f1;
          border-color:#FFFFFF;
          p{
            color: #666;
          }
        }

        img {
          height: 36px;
          vertical-align: middle;
          margin-bottom: 10px;
        }

        p {
          font-size: 15px;
          color: #666;
          color: #17277c;
        }
      }
    }
  }

  .visual-config-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: column nowrap;

    .config-item-title {
      &:after {
        display: none;
      }
    }

    .visual-web-group {
      width: 365px;
      height: 667px;
      border: 4px solid #000;
      border-radius: 25px;
      background: #ffffff;
      overflow: hidden;
      position: relative;
      box-sizing: content-box;

      .visual-box-one {
        min-height: 280px;
        padding-top: 74px;
        box-sizing: border-box;
        background: #17287a url("../../../assets/draggable-img/buddle-day-default-bg.jpg") no-repeat bottom center / 100% auto;
        cursor: no-drop;
        font-size: 0;

        img {
          width: 100%;
        }
      }

      .visual-box-two {
        border-top: 1px solid #dedede;
        background-color: #efefef;
        position: relative;
        cursor: no-drop;

        .default-tips {
          height: 60px;
          line-height: 60px;
          font-size: 16px;
          color: #409EFF;
          text-align: center;
        }

        .type-tab-group {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 28px;
          position: relative;

          &.absolute {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
          }

          .tab-item {
            display: inline-block;
            font-size: 15px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 0 0 8px 8px;
            position: relative;
            margin: 18px 0 0;
            color: #353535;

            &.tab-item-1 {
              width: 100%;
            }

            &.tab-item-2 {
              width: 50%;
            }

            &.tab-item-3 {
              width: 33.333333%;
            }

            &.tab-item-4 {
              width: 25%;
            }

            &::after {
              content: '';
              position: absolute;
              right: 0;
              top: 50%;
              background-color: #ababab;
              width: 1px;
              height: 14px;
              transform: translateY(-50%);
            }

            &:last-child {
              .tabText {
                border-right: 0;
              }
            }

            &:last-child::after, &.active::after {
              width: 0;
            }

            &.active {
              background: #fff;
              border-radius: 8px 8px 0 0;

              .tabText {
                border-right: 0;

                span {
                  color: #3D7EFF;
                }
              }
            }

            .tabText {
              box-sizing: border-box;
              padding: 0 23px;

              &.border {
                line-height: 23px;
                border-right: 1px solid #ABABAB;
              }

              text {
                font-size: 7px;
                position: relative;
                bottom: 3px;
              }
            }

            .data-bubble {
              position: absolute;
              width: 18px;
              height: 18px;
              border-radius: 50%;
              background: #3D7EFF;
              color: #ffffff;
              right: 0;
              top: -5px;
              font-size: 10px;
              line-height: 18px;
              text-align: center;

              &.nocheck {
                top: -8rpx;
                right: 5px;
              }
            }
          }
        }
      }

      .visual-box-three {
        margin-bottom: 50px;
        background-color: #efefef;
        position: relative;
        /*border-radius: 0 0 20px 20px;*/
        overflow: hidden;

        .default-tips {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          font-size: 16px;
          color: #409EFF;
          width: 100%;
          height: 16px;
          text-align: center;
          line-height: 1;
          margin: auto;
          z-index: 0;
        }

        .tabs-content {
          min-height: 286px;
          position: relative;
          z-index: 1;

          .tabs-item {
            margin: 0 12px 12px;
            background-color: #FFF;
            border-radius: 5px;
            padding: 18px 15px;
            overflow: hidden;
            position: relative;
            cursor: all-scroll;
            min-height: 86px;
            box-sizing: border-box;

            &.sortable-chosen, .sortable-ghost {
              border: 1px dashed rgba(255, 240, 0, 1);
            }

            &:hover {
              border: 1px dashed #409EFF;

              .del-btn {
                display: block;
              }
            }

            &.click-action {
              border: 1px solid #409EFF;
            }

            .del-btn {
              position: absolute;
              right: 0;
              top: 0;
              padding: 3px 4px;
              font-size: 15px;
              color: #3D7EFF;
              display: none;
              cursor: pointer;
              z-index: 3;
            }

            .name {
              font-size: 14px;
              color: #333;

              .tips-text {
                display: inline-block;
                vertical-align: middle;
                line-height: 1;
                font-size: 12px;
                color: #FFFFFF;
                background-color: #d6d6d6;
                margin-left: 6px;
                padding: 3px 6px;
                border-radius: 20px;
              }
            }

            .time {
              font-size: 12px;
              color: #999;
              margin-top: 12px;
              span{
                font-size: 12px;
                color: #999;
                margin-right:4px;
              }
            }

            .dk-btn {
              position: absolute;
              right: 10px;
              top: 25px;

              .play-card {
                position: relative;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                text-align: center;
                border: 1px solid #3D7EFF;
                box-sizing: border-box;

                .play-card-in {
                  position: absolute;
                  width: 28px;
                  height: 28px;
                  background: #3D7EFF;
                  color: #fff;
                  font-size: 12px;
                  border-radius: 50%;
                  line-height: 28px;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
          }

          .item-card {
            margin: 20px 12px;
            background-color: #FFF;
            border-radius: 5px;
            padding: 12px 15px;
            overflow: hidden;
            position: relative;
            cursor: all-scroll;
            border: 1px dashed rgba(255, 240, 0, 1);

            p {
              text-align: center;
              font-size: 14px;
              color: #353535;
            }
          }
        }
      }

      .visual-box-four {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #FFFFFF;
        display: flex;
        z-index: 9;

        .tabbar-item {
          display: block;
          flex: 1;
          padding: 5px 0;
          font-size: 0;
          color: rgba(0, 0, 0, 0.5);
          text-align: center;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

          .tabbar__icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
          }

          .tabbar__label {
            color: rgba(0, 0, 0, 0.9);
            font-size: 10px;
            line-height: 1;
          }

          &.on {
            .tabbar__label {
              color: #3D7EFF;
            }
          }
        }
      }
    }
  }

  .function-button-group {
    display: flex;
    justify-content: flex-end;
  }

  /* 过渡动画 */
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .3s ease;
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(-20%);
    /*opacity: 0;*/
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .weui-navbar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
  }
</style>
